<template>

  <view style="background-color: white;">
    <view class="search-box">
      <my-search @click="gotoSearch"></my-search>
    </view>
    <swiper interval="3000" indicator-dots="true" autoplay="true" circular="true">
      <swiper-item>
        <image mode="widthFix" src="../../images/lunbotu1.png">
        </image>
      </swiper-item>
      <swiper-item class="cri">
        <image mode="widthFix" src="../../images/lunbotu2.png">
        </image>
      </swiper-item>
      <swiper-item>
        <image mode="widthFix" src="../../images/lunbotu3.png">
        </image>
      </swiper-item>
      <swiper-item>
        <image mode="widthFix" src="../../images/lunbotu4.png">
        </image>
      </swiper-item>
    </swiper>
    <view class="nav-list">
      <view class="nav-item" v-for="(item, index) in navList" :key="item.id" @click="navClickHandler(item)">
        <image :src="item.image_src" class="nav-img"> </image>
        <text class="text_1">{{item.name}}</text>
      </view>
    </view>
    <view class="floor-list">
      <!-- 楼层 item 项 -->
      <view class="floor-item" v-for="(item, index) in floor_title" :key="index">
        <navigator :url="item.navigator_url">
          <!-- 楼层标题 -->
          <image :src="item.image_src" :style="{width: item.image_width + 'rpx'}" mode="widthFix">
          </image>
        </navigator>
      </view>
    </view>




  </view>

</template>

<script>
  export default {
    data() {
      return {
        // 1. 轮播图的数据列表，默认为空数组
        navList: [{
            "id": "1",
            "name": "社区动态",
            "image_src": "../../images/news.png",
            "open_type": "redirect",
            "navigator_url": "/pages/category/main"
          }, {
            "id": "2",
            "name": "心理训练",
            "image_src": "../../images/train.png"
          },

          // {
          //   "id": "3",
          //   "name": "心说说",
          //   "image_src": "../../images/cart.png"
          // }
          {
            "id": "3",
            "name": "心说说",
            "image_src": "../../images/cart.png"
          }, {
            "id": "4",
            "name": "热线",
            "image_src": "../../images/phone.png"
          }
        ],
        floor_title: [{
            "i": "1",
            "name": "热门推荐",
            "image_width": "740",
            "image_src": "../../images/3.jpg",
            "open_type": "navigate",
            "navigator_url": "/subpkg/Antidepression_detail/Antidepression_detail?query=更多"
          }, {
            "i": "2",
            "image_width": "700",
            "name": "防郁键心",
            "image_src": "../../images/1.png",
            "open_type": "navigate",
            "navigator_url": "/subpkg/Antidepression_detail/Antidepression_detail?query=防郁健心"
          }, {
            "i": "3",
            "image_width": "700",
            "name": "再出发",
            "image_src": "../../images/2.jpg",
            "open_type": "navigate",
            "navigator_url": "/subpkg/Antidepression_detail/Antidepression_detail?query=再出发"
          }, {
            "i": "4",
            "image_width": "700",
            "name": "修理自己",
            "image_src": "../../images/4.jpg",
            "open_type": "navigate",
            "navigator_url": "/subpkg/Antidepression_detail/Antidepression_detail?query=修理自己"
          }, {
            "i": "5",
            "image_width": "700",
            "name": "青少年抑郁背后",
            "image_src": "../../images/5.jpg",
            "open_type": "navigate",
            "navigator_url": "/subpkg/Antidepression_detail/Antidepression_detail?query=原因"
          }, {
            "i": "6",
            "image_width": "700",
            "name": "双相情感障碍",
            "image_src": "../../images/6.jpg",
            "open_type": "navigate",
            "navigator_url": "/subpkg/Antidepression_detail/Antidepression_detail?query=双相"
          }

        ],

      }
    },
    // onLoad() {
    //   // 2. 在 onLoad 中调用获取数据的方法
    //   this.getNavList()
    // },
    // methods: {
    //   // 3. 在 methods 中定义获取数据的方法
    //   async getNavList() {
    //     const {
    //       data: res
    //     } = await uni.$http.get(' {/api/public/v1/home/catitems ')
    //     if (res.meta.status !== 200) return uni.$showMsg()
    //     this.navList = res.message
    //   },
    methods: {
      navClickHandler(item) {

        // 判断点击的是哪个 nav
        // console.log(item)
        if (item.name === '社区动态') {
          uni.reLaunch({
            url: '/subpkg/dongtai_detail/dongtai_detail',

          })
        }
        if (item.name === '心理训练') {
          uni.reLaunch({
            url: '/subpkg/train_detail/train_detail',

          })
        }
        if (item.name === '心说说') {
          uni.reLaunch({
            url: '/subpkg/kepu_detail/kepu_detail',

          })
        }
        if (item.name === '热线') {
          uni.reLaunch({
            url: '/subpkg/phone_detail/phone_detail',

          })
        }
      },
      gotoSearch() {
        uni.navigateTo({
          url: '/subpkg/search/search'
        })
      }
    }
  }
</script>

<style lang="scss">
  swiper {
    height: 330rpx;

    .swiper-item,
    image {
      width: 100%;
      height: 100%;
    }
  }


  .nav-list {
    display: flex;
    justify-content: space-around;
    margin: 15px 0;

    .nav-img {
      width: 100rpx;
      height: 100rpx;
      justify-content: center;
    }

    .nav-item {
      width: 33.33%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;

      image {
        width: 40px;
        height: 40px;
      }

      text {
        font-size: 12px;
      }
    }

  }

  .floor-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .search-box {
    position: sticky;
    top: 0;
    z-index: 999;
  }
</style>